<div ng-controller="BeneficiarioController">
   <form name="formBeneficiario" ng-submit="addBeneficiario()" novalidate>
    <fieldset>
        <legend style="background: whitesmoke;">Datos de Beneficiario</legend>
        <alert ng-repeat="alert in alertsBeneficiario" type="{{alert.type}}" close="closeAlert($index)">
            <span ng-bind-html="alert.msg"></span>
        </alert>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group" ng-class="{ 'has-error' : formBeneficiario.numeroDocumento.$invalid && formBeneficiario.numeroDocumento.$dirty}">
                    <label>Numero Documento</label>
                    <label style="color: brown;">(*)</label>
                    <input focus-on="focusNumeroDocumentoBeneficiario" type="text" name="numeroDocumento" ng-model="beneficiario.numeroDocumento" ng-maxlength="20" class="form-control" placeholder="Numero Documento" capitalize required autofocus/>
                    <div ng-show="formBeneficiario.numeroDocumento.$invalid && formBeneficiario.numeroDocumento.$dirty">
                        <p class="help-block" ng-show="formBeneficiario.numeroDocumento.$error.required">
                            Ingrese Numero Documento.
                        </p>
                        <p class="help-block" ng-show="formBeneficiario.numeroDocumento.$error.maxlength">
                            Maximo 20 Caracteres.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group" ng-class="{ 'has-error' : formBeneficiario.apellidoPaterno.$invalid && formBeneficiario.apellidoPaterno.$dirty}">
                    <label>Apellido Paterno</label>
                    <label style="color: brown;">(*)</label>
                    <input type="text" name="apellidoPaterno" ng-model="beneficiario.apellidoPaterno" ng-minlength="1" ng-maxlength="40" class="form-control" placeholder="Apellido Paterno" capitalize required/>
                    <div ng-show="formBeneficiario.apellidoPaterno.$invalid && formBeneficiario.apellidoPaterno.$dirty">
                        <p class="help-block" ng-show="formBeneficiario.apellidoPaterno.$error.required">
                            Ingrese Apellido Paterno.
                        </p>
                        <p class="help-block" ng-show="formBeneficiario.apellidoPaterno.$error.minlength">
                            Minimo 1 Caracter.
                        </p>
                        <p class="help-block" ng-show="formBeneficiario.apellidoPaterno.$error.maxlength">
                            Maximo 40 Caracteres.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group" ng-class="{ 'has-error' : formBeneficiario.apellidoMaterno.$invalid && formBeneficiario.apellidoMaterno.$dirty}">
                    <label>Apellido Materno</label>
                    <label style="color: brown;">(*)</label>
                    <input type="text" name="apellidoMaterno" ng-model="beneficiario.apellidoMaterno" ng-minlength="1" ng-maxlength="40" class="form-control" placeholder="Apellido Materno" capitalize required/>
                    <div ng-show="formBeneficiario.apellidoMaterno.$invalid && formBeneficiario.apellidoMaterno.$dirty">
                        <p class="help-block" ng-show="formBeneficiario.apellidoMaterno.$error.required">
                            Ingrese Apellido Materno.
                        </p>
                        <p class="help-block" ng-show="formBeneficiario.apellidoMaterno.$error.minlength">
                            Minimo 1 Caracter.
                        </p>
                        <p class="help-block" ng-show="formBeneficiario.apellidoMaterno.$error.maxlength">
                            Maximo 40 Caracteres.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group" ng-class="{ 'has-error' : formBeneficiario.nombres.$invalid && formBeneficiario.nombres.$dirty}">
                    <label>Nombres</label>
                    <label style="color: brown;">(*)</label>
                    <input type="text" name="nombres" ng-model="beneficiario.nombres" ng-minlength="1" ng-maxlength="50" class="form-control" placeholder="Nombres" capitalize required/>
                    <div ng-show="formBeneficiario.nombres.$invalid && formBeneficiario.nombres.$dirty">
                        <p class="help-block" ng-show="formBeneficiario.nombres.$error.required">
                            Ingrese Nombres.
                        </p>
                        <p class="help-block" ng-show="formBeneficiario.nombres.$error.minlength">
                            Minimo 1 Caracter.
                        </p>
                        <p class="help-block" ng-show="formBeneficiario.nombres.$error.maxlength">
                            Maximo 50 Caracteres.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group" ng-class="{ 'has-error' : formBeneficiario.porcentajeBeneficio.$invalid && formBeneficiario.porcentajeBeneficio.$dirty}">
                    <label>Porcentaje % </label>
                    <label style="color: brown;">(*)</label>
                    <input type="number" name="porcentajeBeneficio" ng-model="beneficiario.porcentajeBeneficio" ng-minlength="1" ng-maxlength="3" ng-pattern="/^[0-9]+$/" class="form-control" placeholder="Porcentaje" required/>
                    <div ng-show="formBeneficiario.porcentajeBeneficio.$invalid && formBeneficiario.porcentajeBeneficio.$dirty">
                        <p class="help-block" ng-show="formBeneficiario.porcentajeBeneficio.$error.required">
                            Ingrese Porcentaje Valido.
                        </p>
                        <p class="help-block" ng-show="formBeneficiario.porcentajeBeneficio.$error.minlength">
                            Minimo 1 Caracter.
                        </p>
                        <p class="help-block" ng-show="formBeneficiario.porcentajeBeneficio.$error.maxlength">
                            Maximo 3 Caracteres.
                        </p>
                        <p class="help-block" ng-show="formBeneficiario.porcentajeBeneficio.$error.pattern">
                            Ingrese Porcentaje Valido.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label>&nbsp;</label>
                    <div>
                        <button type="submit" class="btn btn-primary">A&ntildeadir</button>
                        <button type="button" class="btn btn-default" ng-click="clear()">Limpiar</button>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
   </form>
    <fieldset>
        <legend style="background: whitesmoke;">Lista de Beneficiarios</legend>
        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <table class="table table-condensed">
                        <thead>
                        <tr>
                            <th>Num. Documento</th>
                            <th>Apellido Paterno</th>
                            <th>Apellido Materno</th>
                            <th>Nombres</th>
                            <th>Porcentaje (%)</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="beneficiario in view.beneficiarios | unique">
                            <td><span ng-bind="beneficiario.numeroDocumento"/></td>
                            <td><span ng-bind="beneficiario.apellidoPaterno"/></td>
                            <td><span ng-bind="beneficiario.apellidoMaterno"/></td>
                            <td><span ng-bind="beneficiario.nombres"/></td>
                            <td>
                            	<span ng-bind="beneficiario.porcentajeBeneficio"/>
                            	<span>%</span>
                            </td>
                            <td><button type="button" ng-click="removeBeneficiario($index)" class="btn btn-danger btn-xs">Delete</button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </fieldset>
</div>